<template>
  <div class="container">
    <div class="title">英特尔北京冬奥科技文化臻享之旅</div>
    <div class="desc">请在下方登录，开始您的英特尔北京冬奥科技文化臻享之旅注册，并获取有关此次旅行的精彩细节。</div>
    <div class="form">
      <div style="display: flex;">
        <IntelSelect
            label="国家/地区代码"
            v-model="phoneCountryCode"
            placeholder="国家/地区代码"
            class="register-input w100"
            :options="phoneCountryOptions"
            :value="phoneCountryCode"
            @change="handleSelectChange"
        />
        <IntelInput
            label="手机号"
            v-model="phone"
            placeholder="手机号"
            class="register-input"
        />
      </div>
      <div style="display: flex;">
        <IntelInput
            :label="$t('register.captcha')"
            v-model="captcha"
            type="captcha"
            :placeholder="$t('register.captcha')"
            class="register-input  w100"
            @request="handleRequestCaptcha"
            :error="!captchaValid"

        />
        <IntelInput
            label="手机验证码"
            v-model="smsVerifyCode"
            type="validCode"
            placeholder="手机验证码"
            :getCodeText="getCodeText"
            class="register-input"
            @getCode="handlePhoneCodeClick"
        />
      </div>
      <div class="input-group">
         <div :class="[ ableLogin ? 'primary-button' : 'disabled-button', 'button']" @click="handleSubmit">登录</div>
      </div>
      <!--    <div class="phone-error">抱歉，您输入的手机号未在邀请列表中，请您检查手机号或联系您的英特尔客户经理。</div>-->
    </div>
    <div class="agreement">
      <input type="checkbox" v-model="checkbox">
      <div class="agreement-text">
        通过提交注册表格，您确认您是一名18周岁或以上的成人，并同意与英特尔分享用于此业务请求的您的个人信息。英特尔的网站和通讯遵照我们的
        <a href="https://www.intel.cn/content/www/cn/zh/privacy/intel-privacy-notice.html" target="_blank">隐私声明</a>和
        <a href="https://www.intel.cn/content/www/cn/zh/legal/terms-of-use.html" target="_blank">使用条款</a>。
      </div>
    </div>
    <Alert v-if="alertShow" @ok="() => alertShow = false" :content="alertContent"/>
  </div>
</template>

<script>
import IntelInput from "~/components/common/IntelInput";
import IntelSelect from "~/components/common/IntelSelect";
import {getPhoneCode, getUserInfo, login} from "~/api/service";
import Alert from "~/components/common/Alert";

const phoneCountryOptions = [
  {
    name: '中国大陆(+86)',
    value: '86'
  }, {
    name: '中国香港(+852)',
    value: '852'
  }, {
    name: '英国(+44)',
    value: '44'
  }

]
export default {
  name: "Login",
  components: {
    IntelInput,
    IntelSelect,
    Alert
  },
  data() {
    return {
      phoneCountryOptions,
      phoneCountryCode: '86',
      phone: '',
      smsVerifyCode: null,
      captcha: null,
      requestCaptchaCode: null,
      captchaValid: true,
      getCodeText: '获取手机验证码',
      alertShow: false,
      alertContent: null,
      ableGetCode: true,
      checkbox: false
    }
  },
  computed: {
    ableLogin () {
      if (this.phone && this.captcha && this.phoneCountryCode && this.smsVerifyCode) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    test () {
      const state = this.$store.state.isLogin
      console.log(state)
      this.$store.commit('SET_LOGIN_STATE', !state)
      console.log(this.$store.state.isLogin)
    },
    handleSelectChange(val) {
      console.log(val)
      this.phoneCountryCode = val
    },
    handleRequestCaptcha(code) {
      this.requestCaptchaCode = code
    },
    handlePhoneCodeClick() {
      if (this.ableGetCode) {
        if (!this.phone) {
          // phone number not empty
          this.alertShow = true
          this.alertContent = '请输入手机号'
        } else if (!this.captcha) {
          // 图形验证码不为空
          this.alertShow = true
          this.alertContent = '请输入图形验证码'
        } else {
          // 请求邮箱验证码
          this.getPhoneCode()
        }
      }
    },
    getPhoneCode() {
      this.ableGetCode = false
      this.getCodeText = '请稍候...'
      const params = {
        phone: this.phone,
        imgVerifyCode: this.captcha,
        imgVerifyCodeRequestId: this.requestCaptchaCode,
        phoneCountryCode: this.phoneCountryCode
      }
      getPhoneCode(params).then(res => {
        console.log(res)
        if (res.code === 500) {
          const msg = res.message.split('$$')
          this.alertShow = true
          this.alertContent = msg[0]
          this.ableGetCode = true
          this.getCodeText = '获取手机验证码'
        }
        if (res.code === 200) {
          this.ableGetCode = true
          this.beginCountdown()
        }
      })
    },
    beginCountdown() {
      this.ableGetCode = false
      let num = 60
      this.getCodeText = this.$t('valid.reGet', {num: num})
      const countdown = setInterval(() => {
        if (num > 0) {
          num -= 1
          this.getCodeText = this.$t('valid.reGet', {num: num})
        } else {
          this.ableGetCode = true
          this.getCodeText = '获取手机验证码'
          num = 60
          clearInterval(countdown)
        }
      }, 1000)
    },
    handleSubmit () {
      const param = {
        mobilePhoneNumber: this.phone,
        phoneCountryCode: this.phoneCountryCode,
        smsVerifyCode: this.smsVerifyCode
      }
      const that = this
      if (this.checkbox) {
        login(param).then(res => {
          console.log(res)
          if (res.code === 500) {
            const msg = res.message.split('$$')
            this.alertShow = true
            this.alertContent = msg[0]
          }
          if (res.code === 200) {
            that.getUserInfo()
            localStorage.setItem('overnight_token', res.data.token)
            that.$store.commit('SET_LOGIN_SHOW', false)
            that.$store.commit('SET_LOGIN_STATE', true)
            if(!res.data.coreInfoComplete) {
              //进入完善用户页面
              that.$router.push({
                path: '/generalInfo'
              })
            }
          }
        })
      } else {
        this.alertShow = true
        this.alertContent = '请先勾选同意后登录'
      }
    },
    getUserInfo () {
      getUserInfo().then(res => {
        console.log(res)
        if (res.code === 200) {
          this.userInfo = res.data
          localStorage.setItem('overnight_userInfo', JSON.stringify(res.data))
          this.$store.commit('SET_LOGIN_STATE', true)
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 244px;
  background: white;
  padding: 32px;
  box-sizing: border-box;
}

.title {
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}

.desc {
  padding-top: 20px;
  font-size: 14px;
  color: #999999;
}

.register-input {
  margin-top: 16px;
  width: 440px;
}

.w100 {
  width: 100px;
  margin-right: 16px;
}

.phone-error {
  padding-top: 12px;
  font-size: 12px;
  color: #D50000;
}

.input-group {

}
.agreement {
  display: flex;
  margin-top: 22px;
}
.agreement > .agreement-text {
  font-size: 14px;
  color: #999999;
}
.agreement > .agreement-text > a {
  font-size: 14px;
  color: #0068B5;
}
.agreement > input {
  margin-right: 8px;
}
</style>
